<!DOCTYPE html>
<html lang="en" ng-app="carmenApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title> Carmen Sandiego </title>
        <meta name="description" content="Carmen Sandiego, el juego">
       
        <!-- JQUERY -->
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

        <!-- BOOTSTRAP -->
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="stylesheets/main2.css">
        
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

        <!-- ANGULAR  -->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"></script>
        
        <!-- CONTROLLERS de Pais/Villano/Lugar -->
        <script src="javascripts/controllers.js"></script>
        
    </head>
    <body data-ng-controller = "CarmenController">
        <div class = "container"  data-ng-init="iniciarJuego()">
            <div class = "jumbotron">
                
                <!--Componentes para viajar a otro pais-->
                <div class="jumbotron" id="lugar-detective">
                    <span class="title"> Detective, usted esta en <span class="label label-success" ng-bind="caso.nombrePais"/> </span>
                    <h2> Estos lugares pueden tener pistas utiles: </h2>
                    <!--Lugares a consultar-->
                    <div class ="btn-group btn-group-justified">
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary"  data-ng-repeat = "lugar in caso.lugares" ng-click = "consultar(lugar)">
                                <span class = "glyphicon glyphicon-screenshot"> </span> {{lugar}}
                            </button>
                        </div>
                    </div>
                </div>
            
                <hr></hr>
                
                <!--Primer Row-->
                <div class="row">
                    <!--Destinos recorridos -->
                    <div class = "col-sm-12">
                        <div class="panel panel-success" id="ruta">
                            <div class="panel-heading" id="ruta">
                                <span class = "glyphicon glyphicon-random"> </span> <span> Mi ruta </span>
                            </div>
                            <div class="panel-body" id = "recorridos">
                                {{caso.paisesRecorridos}}
                            </div>
                        </div>  
                    </div>
                </div>
            
                <!--Segundo Row-->
                <div class="row">
                    <!--Lista Conexiones posibles -->
                    <div class = "col-sm-4">
                        <div class = "panel-success">
                        <div class = "panel-heading">
                            <div class ="panel-title">
                                <span class = "glyphicon glyphicon-send"></span>
                                <span>Posibles Destinos</span>
                            </div>
                        </div>
                        <div class="input-group" data-ng-repeat = "conexion in caso.posiblesConexiones">
                            <span class="input-group-addon">
                                <input type="radio" ng-click = "paisSeleccionado(conexion)">
                            </span>
                            <div class = "list-group-item">
                                {{conexion}}
                            </div>
                        </div>
                        </div>
                    </div>
                    
                    <!--Lista Destinos fallidos-->
                    <div class = "col-sm-4">
                        <div class = "panel-success">
                            <div class = "panel-heading">
                                <div class ="panel-title">
                                    <span class = "glyphicon glyphicon-remove-circle"></span>
                                    <span>Destinos Fallidos</span>
                                </div>
                            </div>
                            <div class = "list-group-item" data-ng-repeat = "destino in caso.destinosFallidos" >
                                {{destino}}
                            </div>
                        </div>
                    </div>
                    <div class = "col-sm-4">
                    <button class="btn btn-lg btn-primary" id="viajar" type="button" ng-click="viajar()">
                        ¡Viajar!
                    </button>
                    </div>
                </div>
            
                <hr></hr>
        
                <!--Tercer Row-->
                <div class = "row">
                    <div class = "col-sm-6">
                        <div class = "dropdown">
                        <button class="btn btn-default dropdown-toggle dropdown-sospechosos-sides btn-dd" type="button"
                            id="dropdownMenu1" data-toggle="dropdown">
                            Sospechosos
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                <li class="sospechoso" role="presentation" data-ng-repeat = "villano in villanos.villanos">
                                    <a role="menuitem" tabindex="-1" ng-click = "seleccionarVillano(villano)" >
                                        <span class="glyphicon glyphicon-user"></span> {{villano}}
                                    </a>
                                </li>
                            </ul>  
                        </div>
                    
                    </div>
                        <!--Ordenes de arresto-->
                        <div class = "col-sm-6">
                            <div class="panel panel-success">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Orden ya emitida contra: {{sospechoso}}</h3>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-lg btn-primary dropdown-sospechosos-sides" type="button" ng-click = "emitirOrden()">
                            ¡Generar Orden! 
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Pistas -->
        <div class="modal fade" id="pistaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">Detective, esta informacion puede serle util:</h4>
                    </div>
                    <div class="modal-body">
                        <ul>
                            <li ng-repeat = "pista in pistas">
                                {{pista.informacion}}
                            </li>
                        </ul>
                    </div>
                    <div class="modal-footer">
                    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#estadoModal" ng-click = "obtenerResultadoJuego()">
                        Resultado Juego
                    </button>
                        <button type="button" class="btn btn-primary btn-lg" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>

        <!--Modal estado de juego-->
        <div class="modal fade" id="estadoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">Detective, esta informacion puede serle util:</h4>
                    </div>
                    <div class="modal-body" ng-bind = "resultado"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary btn-lg" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script>
     $(function(){

            $(".dropdown-menu").on('click', 'li a', function(){
              $(".btn-dd:first-child").text($(this).text());
              $(".btn-dd:first-child").val($(this).text());
           });

        });
    </script>
    </body>
</html>